<template>
    <div class="grid-list">
        <item :article="article" v-for="article in articles" :key="article.id" />
        <addItem />
    </div>
</template>

<script>
import $ from "jquery";
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import item from "./item.vue";
import addItem from "../components/addItem.vue";

export default {
    props: ["type"],
    components: {
        item,
        addItem,
    },
    beforeRouteUpdate(to, from, next) {
        if (to.params.type === "project") to.meta.title = "项目笔记";
        next();
    },
    setup(props) {
        const articles = ref([]); // 使用 ref 创建响应式变量

        let route = useRoute();

        let type = props.type;
        if (type === undefined) type = route.meta.type;

        // 使用 onMounted 确保在组件挂载后发起 AJAX 请求
        onMounted(() => {
            $.ajax({
                url: "/notes/" + type,
                success(resp) {
                    articles.value = resp.data; // 更新响应式变量的值
                },
            });
        });

        return {
            articles,
        };
    },
};
</script>

<style scoped></style>
